{% extends "_layouts/examples.html" %}
{% block title %}Side navigation / Raw HTML{% endblock %}

{% block standalone_css %}patterns_side-navigation{% endblock %}

{% block content %}

<div class="p-side-navigation--raw-html" id="drawer">

  <button class="p-side-navigation__toggle js-drawer-toggle" aria-controls="drawer">
    Toggle side navigation
  </button>

  <div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="drawer"></div>

  <div class="p-side-navigation__drawer">
    <div class="p-side-navigation__drawer-header">
      <button class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="drawer">
        Toggle side navigation
      </button>
    </div>

    <h3>Title</h3>
    <ul>
      <li>
        <a href="#">Title that is a link</a>
      </li>
      <li>
        <a href="#">First level link</a>
      </li>
      <li>
        <a href="#">Link with children</a>
        <ul>
          <li>
            <a href="#">Second level link</a>
          </li>
          <li>
            <span>Second level text</span>
          </li>
          <li>
            <a href="#">Second level link with children</a>
            <ul>
              <li>
                <span>Third level text</span>
              </li>
              <li>
                <a aria-current="page" href="#">Third level active link</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <span>First level item that is not a link</span>
      </li>
    </ul>
    <h3>Title</h3>
    <ul>
      <li>
        <span>Title that is not a link</span>
      </li>
      <li>
        <span>First level text</span>
      </li>
      <li>
        <span>Text item with children</span>
        <ul>
          <li>
            <a href="#">Second level link</a>
          </li>
          <li>
            <span>Second level text</span>
          </li>
          <li>
            <span>Second level text with <code>children</code> and has some code in the text</span>
            <ul>
              <li>
                <span>Third level text</span>
              </li>
              <li>
                <a class="is-active" href="#">Third level active item that is long and wraps wraps wraps wraps wraps wraps</a>
              </li>
              <li>
                <a href="#">Third level link</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <span>First level item that is not a link</span>
      </li>
      <li>
        <a href="#">First level link</a>
      </li>
    </ul>
  </div>
</div>

{% endblock %}

{% block script %}
    <script>
        {% include "docs/examples/patterns/side-navigation/_example_script.js" %}
        {% include "docs/examples/patterns/side-navigation/_toggle_script.js" %}
    </script>
{% endblock %}
